// 设计界面配置

/**
 * 动画默认配置
 */
export const _config = {

  // 动画配置
  animation: [
    { code: 'animejs', src: 'http://xx.xx/xx.js' },
    { code: 'anijs', src: 'http://' }
  ]
}

export const _selectArea = `position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:red;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;`


// type: 类型 - 无（null）、在clazz==widget时，，矩形（rectangle）、文本（rich_text）、线（line）、image_view（图片）、link、
// triangle（三角形）、input（单行输入）、textarea（多行输入）、select（下拉框）、file_input（文件选择）、
// map_view（地图）、carousel（轮播图）、icon（图标）

/**
 * 解释：
 *  data-widget-wid: 部件根目录、样式节点
 *  data-wid: 部件样式节点
 *  date-edit-wid: 表示其子节点是双向绑定的
 */
export const getWidgetTemplate = (code, args) => {
  // return _widgetTemplate[code].replace(/\{\{w+\}\}/g, wid)
  let template = _widgetTemplate[code]
  let result = template.template;
  for (let key in args) {
    let regx = "/\{\{" + key + "\}\}/g"
    result = result.replace(eval(regx), args[key])
  }
  return result
}

export const getWidgetNode = (code, args) => {
  let htmlStr = getWidgetTemplate(code, args)
  var div = document.createElement("div");
  div.innerHTML = htmlStr;
  return div.childNodes[0];
}

/**
 * tabindex='0' ： 有onfocus和onblur事件
 * '@/assets/design.less';
 */
export const _widgetTemplate = {
  'widgetRootClassName': 'group-widget', // widget根节点特有的class
  'rectangle': {
    'template': `<div draggable='false' data-widget-wid='{{wid}}' class='group-widget widget'> 
            <div data-wid='{{wid}}' class='widget rectangle'> 
                <div class=" hcenter" data-edit-wid='{{wid}}' class='text'> <p>&nbsp;</p> </div>
            </div>
        </div>`,
    'edit': "<p>&nbsp;</p>"
  },
  // 矩形
  'rich_text': {
    'template': `<div draggable='false' data-widget-wid='{{wid}}' class='group-widget widget'>
            <div data-wid='{{wid}}' class='widget rich_text rounded_rect hcenter vmiddle'> 
                <div  data-edit-wid='{{wid}}' class='rich-text'> <p>{{text}}</p></div></div></div>`,
    'edit': "<p> <span>  双击编辑文本 </span> </p>"
  },
  'line': ``,
  'image_view': ``,
  'link': ``,
  'triangle': ``,
  'input': ``,
  'textarea': ``,
  'select': ``,
  'file_input': ``,
  'map_view': ``,
  'carousel': ``,
  'ico': ``
}